<template>
  <a-modal
    width="auto"
    top="200"
    title-align="start"
    v-model:visible="visible"
    @cancel="handleCancel"
  >
    <template #title>
      <span class="title">添加关联</span>
    </template>
    <div class="main-box">
      <div class="top-box">
        <a-row>
          <a-col :span="4">
            <span class="title small-title">请选择标的</span>
          </a-col>
        </a-row>
        <a-row style="border: 1px solid #ebf0fa; border-radius: 10px">
          <a-col :span="6">
            <div class="radio-box">项目名称</div>
            <div style="overflow-y: auto; overflow-x: hidden; height: 250px">
              <a-radio-group
                v-model="checkedProject"
                style="width: 100%"
                :min="0"
                :max="1"
                @change="handleChangeSubject"
              >
                <template v-for="item in subjectArr" :key="item.id">
                  <a-radio :value="item.id" style="width: 100%">
                    <template #radio="{ checked }">
                      <div class="radio-class" :class="{ 'custom-radio-card-checked': checked }">
                        <div class="custom-radio-card-mask">
                          <div class="custom-radio-card-mask-dot" />
                        </div>
                        <div class="txt-box">
                          <div class="custom-radio-card-title first-box">
                            {{ item.name }}
                          </div>
                        </div>
                      </div>
                    </template>
                  </a-radio>
                </template>
              </a-radio-group>
            </div>
          </a-col>
          <a-col :span="18">
            <CommonTable
              :loading="loading"
              :showPagination="false"
              :columnsData="associationTableFirstDataColumns"
              :tableData="tableData"
              isSelecteRow
              rowKey="item_id"
              v-model:selectedData="selectedData"
              @handlerSelectRow="handlerSelectRow"
              @handlerSelectAllRow="handlerSelectAllRow"
            >
            </CommonTable>
          </a-col>
        </a-row>
      </div>
      <div class="bottom-box">
        <a-row>
          <a-col :span="4">
            <span class="title small-title">已选中标的</span>
          </a-col>
        </a-row>
        <a-row>
          <CommonTable
            :showPagination="false"
            :columnsData="associationTableSecondDataColumns"
            :tableData="secondTableData"
          >
            <template #index="{ rowIndex }">
              <span>{{ rowIndex + 1 }}</span>
            </template>
            <template #amount="{ rowIndex }">
              <textInput
                width="120px"
                placeholder="请输入金额"
                v-model="secondTableData[rowIndex].amount"
              ></textInput>
            </template>
            <template #operator="{ record }">
              <a-link type="text" @click="remove(record)">删除</a-link>
            </template>
          </CommonTable>
        </a-row>
      </div>
    </div>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary">提交</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { associationTableFirstDataColumns, associationTableSecondDataColumns } from '../values';
import { getList, getRelatedObjects } from '@/api/assetManagement/resource_project/index';
const visible = ref(false);
const checkedProject = ref();
let selectedData = ref([]); //选择的数据
let secondTableData = ref<any>([]); //已选的表格数据
const emits = defineEmits<{
  (e: 'close', value: boolean): void;
  (e: 'update', value: boolean): void;
}>();
const props = defineProps<{
  show: boolean; // 是否显示弹窗
  id: number; // 科目的id
  code: number; // 科目的code
  amount: number; // 科目的总金额
  data: any; // 科目对应的已关联数据
}>();

const subjectArr = ref<any>([]); //科目列表

//表格数据

const tableData = ref<any>([]);

/* 获取多选数据 */
const handlerSelectRow = (data: any) => {
  selectedData.value = data;
  secondTableData.value = tableData.value?.filter((item: any) => data.includes(item.item_id));
  console.log(secondTableData.value);
};
/* 获取全选数据 */
const handlerSelectAllRow = (boo: boolean) => {
  if (boo) {
    selectedData.value = tableData.value.map((item: any) => item.item_id);
    secondTableData.value = tableData.value;
  } else {
    selectedData.value = [];
    secondTableData.value = [];
  }
};

//左边项目名称
const handleChangeSubject = (value: any) => {
  getRelatedObjectEvent(value);
};

//提交
const handleOk = () => {
  //调接口
};

//取消
const handleCancel = () => {
  visible.value = false;
  emits('close', false);
};
/**
 * @method  getProjectList 获取资产项目
 */
const getProjectList = async () => {
  let res = await getList({
    page: 1,
    page_size: 100
  });
  if (res.code === '00000') {
    subjectArr.value = res.data;
  }
};
/**
 * @method  getRelatedObjectEvent 获取资产项目
 */
const loading = ref<boolean>(false);
const getRelatedObjectEvent = async (id: string) => {
  tableData.value = [];
  loading.value = true;
  let res = await getRelatedObjects(id);
  if (res.code === '00000') {
    let data = res.data || [];
    data?.map((item: any) => {
      tableData.value.push({
        item_id: item.id,
        item_name: item.name,
        item_type: item.tag,
        version: item.version
      });
    });
    if (props.data.length > 0) {
      //做勾选处理
    } else {
      //新建并且未提交数据时
    }
  }
};

//选中表格的删除
const remove = (item: any) => {
  secondTableData.value = secondTableData.value.filter((i: any) => i.item_id !== item.item_id);
  selectedData.value = selectedData.value.filter((i: any) => i !== item.item_id);
};
onMounted(() => {
  visible.value = props.show;
  getProjectList();
});
</script>
<style lang="less" scoped>
@import './index.less';
</style>
